<!-- ******供气量****** -->
<template>
  <div class="first-hgcpkc">
    <div class="title-box">
      <div class="title">
        <img src="../../../../assets/img/gongqifa.png" alt="" />
        燃料消耗
      </div>
      <div class="title-one">
        <p class="title-oneP">运损率</p>
        <p class="title-oneP2">存损率</p>
        <div id="consumptionEcharts"></div>
      </div>
      <div class="consumptionEcharts">
        <div id="consumptionEcharts-Column"></div>
      </div>
    </div>
  </div>
</template>
<script>
import "echarts-liquidfill";
import * as echarts from "echarts";
import eventBus from '@/EventBus';

export default {
  name: "first-consumption",
  data() {
    return {};
  },
  created() {
    eventBus.$on('send', (data1, data2, data3, data4, data5, data6, data7, data8) => {
      this.consumptionEcharts(data7)
      this.consumptionEchartsColumn(data8)
    })
  },
  mounted() {
    this.consumptionEcharts();
    this.consumptionEchartsColumn();
     window.addEventListener('resize',()=>{
     this.consumptionEcharts();
    this.consumptionEchartsColumn();
    })
  },
  methods: {
    consumptionEcharts(data7) {
      window.addEventListener("resize", function () {
        consumptionEcharts.resize();
      });
      let consumptionEcharts = this.$echarts.init(
        document.getElementById("consumptionEcharts")
      );
        function fontSize(res){
    	let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 19200);
        return res*fontSize;
	}
      var value = data7 ? data7[0] : 0.45;
      var value1 = data7 ? data7[1] : 0.56;
      var data = [value];
      consumptionEcharts.setOption({
        title: [
          // {
          //     text: '运损率',
          //     x: '10%',
          //     y: '7%',
          //     textStyle: {
          //         fontSize: 24,
          //         fontWeight: '100',
          //          color: '#5dc3ea',
          //         lineHeight: 16,
          //         textAlign: 'center',
          //     },
          // },
          // {
          //     text: '存损率',
          //     x: '60%',
          //     y: '7%',
          //     textStyle: {
          //         fontSize: 24,
          //         fontWeight: '100',
          //         color: '#5dc3ea',
          //         lineHeight: 16,
          //         textAlign: 'center',
          //     },
          // },
        ],
        series: [
          {
            type: "liquidFill",
            radius: "85%",
            center: ["25%", "47%"],
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#103889",
                  },
                  // {
                  //     offset: 1,
                  //     color: '#2ca3e2',
                  // },
                ],
                globalCoord: false,
              },
            ],
            data: [value], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: "RGBA(13, 28, 52, 0.7)",
            },

            label: {
              normal: {
                textStyle: {
                     fontSize:fontSize(5), 
                //   fontSize: 50,
                  color: "#fff",
                },
              },
            },
            outline: {
              // show: false
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: "#112165",
              },
            },
          },

          {
            //第二个球的填充
            type: "liquidFill",
            radius: "85%",
            center: ["75%", "47%"],
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#82662c",
                  },
                  // {
                  //     offset: 1,
                  //     color: '#08bbc9',
                  // },
                ],
                globalCoord: false,
              },
            ],
            data: [value1], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: "RGBA(59, 29, 36, 0.7)",
            },
            label: {
              normal: {
                textStyle: {
                       fontSize:fontSize(5), 
                //   fontSize: 50,
                  color: "#fff",
                },
              },
            },
            outline: {
              // show: false
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: "#112165",
              },
            },
          },
        ],
      });
    },
    consumptionEchartsColumn(data8) {
      window.addEventListener("resize", function () {
        consumptionEchartsColumn.resize();
      });
      let consumptionEchartsColumn = this.$echarts.init(
        document.getElementById("consumptionEcharts-Column")
      );
           function fontSize(res){
    	let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 19200);
        return res*fontSize;
	}
      consumptionEchartsColumn.setOption({
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },

          // boundaryGap: false,
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        },
        yAxis: {
            name:"单位：万元",
            nameTextStyle: {
            padding: [0, 0, 0, 610]    // 四个数字分别为上右下左与原位置距离
        },
          type: "value",
             fontSize:fontSize(5), 
        //   fontSize: 50,
          axisLabel: {
            interval: 0,
            // color: "rgba(207, 227, 252, 1)",
            formatter: "{value} k",
            // fontSize:50,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            label: {
              formatter: "{c}k",
              show: true,
              position: "top", // 位置
              color: "#fff",
                 fontSize:fontSize(1.4), 
            //   fontSize: 14,
              fontWeight: "bold", // 加粗
              // distance: 15 // 距离
            }, // 柱子上方的数值
            markLine: {
              //平均线设置  smooth: false,
            
              silent: true, //true 去掉鼠标悬浮该线上的动画
              symbol: "none", //该线无样式
              label: {
                width: 37,
                height: 22,
                backgroundColor: "red",
                show: true, //该线上的值去掉
                   fontSize:fontSize(1.5), 
                // fontSize: 15,
                color: "#fff",

                // formatter:'{c}'+'\n240k',
                formatter: (params) => {
                  return params.value + "k";
                },
                position: "start",
              },
              lineStyle: {
                //设置该线样式
                normal: {
                  type: "solid",
                  color: "red",
                  width: 2,
                },
              },
              data: [
                {
                  yAxis: 240, //线的值
                },
              ],
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(42, 73, 127, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(25, 44, 73, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            smooth: true,
            data: data8 || [220, 232, 201, 234, 290, 330, 320],
            type: "line",
            areaStyle: {},
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.first-hgcpkc {
  width: 100%;
  height: 3240px;
  .title-box {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    .title {
      margin-top: 110px;
      width: 100%;
      padding-left: 65px;
      height: 217px;
      line-height: 217px;
      font-size: 145px;
      background-color: #1a2a44;
      color: #e3f6fa;
      //   letter-spacing: 10px;

      img {
        width: 145px;
      }
    }
    .title-one {
      float: left;
      width: 100%;
      height: 1085px;
      font-size: 100px;
      color: #fff;
      line-height: 200px;
    //   background-color: #fff;
      .title-oneP {
        display: inline-block;
        background-color: rgb(228, 47, 47);

        background-image: -webkit-linear-gradient(
          top,
          #ffffff,
          #bdd0f7,
          #70a1ff
        );
        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;
      }
      .title-oneP2 {
        text-align: right;
        width: 50%;
        display: inline-block;
        background-color: rgb(228, 47, 47);
        background-image: -webkit-linear-gradient(
          top,
          #ffffff,
          #bdd0f7,
          #70a1ff
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      //   .title-two1{
      //       float: left;
      //       width: 100%;
      //       height: 900px;
      //       background-color: rgb(84, 58, 58);
      //   }
    }
    .consumptionEcharts {
      float: left;
      width: 100%;
      height: 1822px;
    //   background-color: #4dcfe9;
    }
  }
}
#consumptionEcharts {
  width: 100%;
  height: 729px;
  // background-color: #fff;
}
#consumptionEcharts-Column {
  width: 100%;
  height: 95%;
  //   background-color: rgb(47, 38, 38);
}
</style>
